<template>
    <el-dialog v-model="visiable" title="请选择地图">
        <div class="btn-box">
            <div class="map-bth" v-for="item in data.selectMap" :key="item.value" :value="item.value"
                @click="selectMapFn(item)">{{ item.text }}</div>
        </div>
        <el-select v-if="selectedMapVal" @change="selectChange" v-model="selectedVal">
            <el-option v-for="item in provinceMap" :key="item.value" :value="item" :label="item.text" />
        </el-select>
        <div v-if="selectName">
            您当前选择了
            <el-text type="danger"> {{ selectName }}</el-text>
           地图
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancle()">取消</el-button>
                <el-button type="primary" @click="submit()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { commonStore, provinceMap } from "@/store/commonStore"

const visiable = ref(false)
const selectedMapVal = ref(false)
const selectedVal = ref(provinceMap[0])
const selectName = ref("")
const data = reactive({
    selectMap: [
        { text: "中国地图", value: "china" },
        { text: "省级地图", value: "province" }
    ]
})

const createMap = () => {

}

const selectMapFn = (item: any) => {
    if (item.value === "china") {
        commonStore.selectMap = item
        selectName.value = item.text
    } else {
        selectedMapVal.value = true
    }
}

const selectChange = (val: any) => {
    commonStore.selectMap = val
    selectName.value = val.text
}

const cancle = () => {
    selectedMapVal.value = false
    selectedVal.value = provinceMap[0]
    visiable.value = false
    selectName.value = ""
}

const submit = () => {
    cancle()
}

defineExpose({
    visiable
})
</script>

<style scoped>
.header {
    /* background-color: aliceblue; */
}

.btn-box {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.map-bth {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    transition: all 1s;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    cursor: pointer;
    color: #ccc;
}

.map-bth:hover {
    box-shadow: 0 0 10px #ccc;
    color: #999;
}
</style>